<template>
  <div>
    <button @click="handleClick">Click</button>
    <MyDialog ref="dialogRef">
      <template v-slot:default="slotScopes">
        <p>A {{ slotScopes.msg }}</p>
      </template>
      <!-- 
        插槽的数据默认使用的是当前父级组件的数据
        如果希望用当前组件的数据，只能采用作用域插槽将数据传递出来
       -->
      <template v-slot:right> right-{{ parentMsg }} </template>
      <template v-slot:left> left </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/my-dialog/index.vue'
export default {
  name: 'App',
  components: { MyDialog },
  data() {
    return {
      parentMsg: 'parentMsg'
    }
  },
  methods: {
    handleClick() {
      this.$refs.dialogRef.change()
    }
  }
}
</script>

<style lang="scss" scoped></style>
